<div class="baseBox">
  <div class="title">Angular TodoList</div>
  <div class="addBox">
    <input
      (keyup.enter)="addPersonListItem()"
      dTextInput
      placeholder="add todo"
      [(ngModel)]="value"
      #addName
    />
    <d-button
      id="primaryBtn"
      style="margin-right: 4px"
      (click)="addPersonListItem()"
      >添加</d-button
    >
  </div>
  <div class="bodyBox">
    <div
      style="display: flex; justify-content: center; align-items: center"
      *ngIf="personList.length === 0"
    >
      空空如也
    </div>
    <div class="personItem" *ngFor="let item of personList; let i = index">
      <div class="left">
        <d-checkbox [(ngModel)]="item.isChecked"></d-checkbox>
        <div [ngClass]="{ active: item.isChecked, unactive: !item.isChecked }">
          {{ item.name }}
        </div>
      </div>
      <d-button bsStyle="danger" (click)="deletePersonListItem(item.id)"
        >删除</d-button
      >
    </div>
  </div>
  <div
    style="
      padding: 20px;
      border: 1px solid #000;
      margin: 20px 0;
      border-radius: 10px;
    "
  >
    <div>总数量:{{ getSumListLength() }}</div>
    <div>已选中数量:{{ getCheckedLength() }}</div>
    <div>未选中数量:{{ getNoCheckedLength() }}</div>
  </div>
</div>
